<template>
  <div>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition name="hello" appear>
      <h2 v-show="isShow">你好啊！</h2>
    </transition>
  </div>
</template>

<script>
    export default {
        name: "TransitionEffect",
        data(){
          return{
            isShow:false
          }
        }
    }
</script>

<style scoped>
h2{
  background-color: pink;
  /*transition: 2s linear;*/
}
/*详细的写法*/
/*!*进入的起点*!
.hello-enter{
  transform: translateX(-100%);
}
!*进入的终点*!
.hello-enter-to{
  transform: translateX(0);
}
!*离开的起点*!
.hello-leave{
  transform: translateX(0);
}
!*离开的终点*!
.hello-leave-to{
  transform: translateX(-100%);
}*/


/*合并写法*/
/*进入的起点，离开的终点*/
.hello-enter,.hello-leave-to{
  transform: translateX(-100%);
}
/*进入的终点，离开的起点*/
.hello-enter-to,.hello-leave{
  transform: translateX(0);
}
/*如果不在标签上写的话，就在这里写动画运动时长与速度*/
.hello-enter-active,.hello-leave-active{
  transition: 2s linear;
}

</style>
